import SubTitle from "@/pages/OrderModule/common/components/SubTitle";
import { CommonTable } from "@/pages/OrderModule/common/components/CommonTable";
import { CommonModal } from "@/views/components/CommonModal";
import PrintModal from "./PrintModal";
import React, { useState, useRef, useEffect } from "react";
import { Button, Space, Image, InputNumber, message } from "antd";
import Style from "../index.module.less";
import Draggable from "react-draggable";
import IconFont from "@/components/IconFont";
const Content = ({ data, setData, isShowImg, setIsShowImg, imgUrl, imgVisible, setImgVisible }) => {
	const [selectedRowKeys, setSelectedRowKeys] = useState([]);
	const [selectedRows, setSelectedRows] = useState([]);
	const [visible, setVisible] = useState(false);

	const [disabled, setDisabled] = useState(true);
	const [bounds, setBounds] = useState({ left: 0, top: 0, bottom: 0, right: 0 });
	const draggleRef = useRef(null);

	const onStart = (_event, uiData) => {
		const { clientWidth, clientHeight } = window.document.documentElement;
		const targetRect = draggleRef.current?.getBoundingClientRect();
		if (!targetRect) {
			return;
		}
		setBounds({
			left: -targetRect.left + uiData.x,
			right: clientWidth - (targetRect.right - uiData.x),
			top: -targetRect.top + uiData.y,
			bottom: clientHeight - (targetRect.bottom - uiData.y)
		});
	};

	const onChangeActualNum = (e, record, index) => {
		// 去掉数字以外的字符
		let num = e.target.value < 0 ? 0 : e.target.value.replace(/\D/g, "");
		record.actualNum = num > record.shortageNum ? record.shortageNum : num;
		// R160802
		setData({
			...data,
			productInboundOrderDetailsList: data.productInboundOrderDetailsList.map((item, i) => {
				return i == index ? record : item;
			})
		});
	};

	const columns = [
		{
			title: <RenderTitle title="序号" />,
			dataIndex: "index",
			width: 60,
			render: (t, r, i) => i + 1
		},
		{
			title: <RenderTitle title="图片" />,
			dataIndex: "skuImage",
			width: 85,
			render: (value, record, i) => <Image width={72} height={72} src={value} style={{ borderRadius: "6px" }} />
		},
		{
			title: <RenderTitle title="商品信息" />,
			dataIndex: "goodsInfo",
			width: 254,
			render: (value, record) => {
				return (
					<>
						<div>
							{record.skuName};{record.skuSpec}
						</div>
						<div>款式编码：{record.spuCode}</div>
						<div>商品编码：{record.skuCode}</div>
					</>
				);
			}
		},
		{
			title: <RenderTitle title="入库数量" />,
			dataIndex: "actualNum",
			width: 200,
			render: (value, record, index) => {
				return (
					<InputNumber
						value={value}
						precision={0}
						controls={false}
						size="default"
						min={0}
						max={record.shortageNum}
						placeholder="请输入数量"
						onBlur={e => {
							onChangeActualNum(e, record, index);
						}}
						style={{ width: 143 }}
					/>
				);
			}
		},
		{
			title: <RenderTitle title="原入库数量" />,
			dataIndex: "originalNum",
			width: 135
		},
		{
			title: <RenderTitle title="缺货数量" />,
			dataIndex: "shortageNum",
			width: 135
		},
		{
			title: <RenderTitle title="供应商" />,
			dataIndex: "supplierName",
			width: 170
		}
	].map(item => {
		return {
			...item,
			key: item.dataIndex
		};
	});
	function RenderTitle({ title }) {
		return <span style={{ fontSize: 14, lineHeight: "21px", display: "inline-block" }}>{title}</span>;
	}
	// 一键加载未入库数
	const onAddUnReceivedQuantity = () => {
		if (data.productInboundOrderDetailsList.length === 0) return;
		setSelectedRows(selectedRows.map(item => ({ ...item, actualNum: item.shortageNum })))
		setData({
			...data,
			productInboundOrderDetailsList: data.productInboundOrderDetailsList.map(item => {
				return {
					...item,
					actualNum: item.shortageNum
				};
				// if (selectedRowKeys.includes(item.id)) {
				// 	return {
				// 		...item,
				// 		actualNum: item.shortageNum
				// 	};
				// }
				// return item;
			})
		});
	};
	// 打印标签入库
	const onPrintTagReceived = () => {
		if (selectedRowKeys.length === 0) {
			return message.warning("请选择打印数据");
		}
		const printNum = selectedRows.reduce((pre, next) => pre + Number(next.actualNum || 0), 0);
		if(printNum == 0) {
			return message.warning('请输入入库数量');
		}

		setVisible(true);
	};
	useEffect(() => {
		console.log(data);
	}, [data]);
	return (
		<>
			<Space size={8}>
				<Button
					type="primary"
					onClick={() => {
						onAddUnReceivedQuantity();
					}}
					style={{ height: 28 }}
				>
					<span style={{ fontSize: 12, lineHeight: "18px" }}>一键加载未入库数</span>
				</Button>
				<Button
					onClick={() => {
						onPrintTagReceived();
					}}
					style={{ height: 28 }}
				>
					<span style={{ fontSize: 12, lineHeight: "18px" }}>打印入库标签</span>
				</Button>
			</Space>
			<CommonTable
				dataSource={data?.productInboundOrderDetailsList || []}
				rowKey="id"
				columns={columns}
				rowSelection={{
					selectedRowKeys,
					onChange: (selectedRowKeys, selectedRows) => {
						setSelectedRowKeys(selectedRowKeys);
						setSelectedRows(selectedRows);
					}
				}}
				pagination={false}
				style={{ marginTop: 16 }}
			/>
			{isShowImg && imgUrl && imgVisible && (
				<Draggable disabled={disabled} bounds={bounds} nodeRef={draggleRef} onStart={(event, uiData) => onStart(event, uiData)}>
					<div ref={draggleRef} className={Style.imgModal}>
						<div
							onMouseOver={() => {
								if (disabled) {
									setDisabled(false);
								}
							}}
							onMouseOut={() => {
								setDisabled(true);
							}}
							style={{
								width: "100%",
								cursor: "move",
								lineHeight: "24px",
								fontSize: 16,
								paddingBottom: 24
							}}
						>
							<span
								style={{ marginRight: 8, width: 4, height: 10, display: "inline-block", background: "#0068FF", borderRadius: 1 }}
							></span>
							图片预览
						</div>
						<Image
							width={494.91}
							height={465.01}
							className={Style["no-drag"]}
							style={{ borderRadius: 4 }}
							preview={false}
							src={imgUrl}
							onMouseOver={() => {
								if (disabled) {
									setDisabled(false);
								}
							}}
							onMouseOut={() => {
								setDisabled(true);
							}}
						/>
						<IconFont
							type="iconguanbi2fill"
							onClick={() => {
								setImgVisible(false);
							}}
							style={{ position: "absolute", right: "9px", top: "56px", fontSize: "16px", cursor: "pointer" }}
						/>
					</div>
				</Draggable>
			)}
			{visible && (
				<PrintModal
					visible={visible}
					setVisible={setVisible}
					selectedRows={selectedRows}
					handleCancel={() => {
						setVisible(false);
					}}
				/>
			)}
		</>
	);
};
export default Content;
